<template>
  <div>
    我是祖先组件
    <div>所选颜色:{{color}}</div>
    <el-button @click="color = 'red'">红色</el-button>
    <el-button @click="color = 'yellow'">黄色</el-button>
    <el-button @click="color = 'blue'">蓝色</el-button>
    <B></B>
  </div>
</template>

<script>
import { provide, reactive, toRefs,ref } from 'vue'
import B from './B.vue'
export default {
  components: {
    B
  },
  setup () {
    const state = reactive({
      count: 0,
    })
    var color = ref('red')
    provide('color',color)
    return {
      ...toRefs(state),color
    }
  }
}
</script>

<style lang="css" scoped>

</style>